<template>
  <div class="test-container">
    <h1>图片URL测试</h1>
    
    <div v-for="(test, index) in tests" :key="index" class="test-case">
      <h3>测试 {{ index + 1 }}</h3>
      <p><strong>输入:</strong> {{ test.input || '(空)' }}</p>
      <p><strong>输出:</strong> {{ getFullImageUrl(test.input) }}</p>
      <div v-if="test.input" class="image-preview">
        <p>图片预览:</p>
        <img :src="getFullImageUrl(test.input)" alt="测试图片" style="max-width: 300px; max-height: 300px;" />
      </div>
      <hr />
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { getFullImageUrl } from '@/utils/imageUrl';

// 测试用例
const tests = [
  {
    // 测试1: 完整URL
    input: 'http://example.com/image.jpg'
  },
  {
    // 测试2: 带/profile/前缀的路径
    input: '/profile/02f49256-c0ed-47ca-ba6c-c63debc39ef0.jpg'
  },
  {
    // 测试3: UUID格式文件名
    input: '02f49256-c0ed-47ca-ba6c-c63debc39ef0.jpg'
  },
  {
    // 测试4: 普通文件名
    input: 'image.jpg'
  },
  {
    // 测试5: 空值
    input: ''
  },
  {
    // 测试6: null值
    input: null
  },
  {
    // 测试7: 实际存在的数据库中的图片
    input: '/profile/279b3f23-d821-4ac1-8ee0-8a6314cee9ec.jpg'
  }
];
</script>

<style scoped>
.test-container {
  padding: 20px;
  font-family: Arial, sans-serif;
}

.test-case {
  margin-bottom: 30px;
  padding: 15px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.image-preview {
  margin-top: 10px;
  padding: 10px;
  background-color: #f5f5f5;
  border-radius: 5px;
}
</style> 